<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改元素</title>
    <style>
        .bk{
            color: pink;
            background-color: green;
            border: 2px double red;
        }
    </style>
</head>
<body>
    <h1>改标签体</h1>
    <h5 id="context">修改我的内容</h5>
    <h1>改属性</h1>
    <img src="./images/love.gif" shu="5" />
    <h1 id="style">改CSS</h1>


    <h1>练习题</h1>
    <p>
        修改 奇数个LI的背景色改为yellow
        偶数个LI的内容改为BBB
        每个LI 加个属性 price=1000内随机数
    </p>
    <ul id="txt">
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
    </ul>
</body>
<script>
    window.onload=function(){
        var context=document.getElementById("context");
        context.innerHTML="<i>新内容</i>";
        var img=document.querySelectorAll("img");
        //设置属性值setAttribute()
        img[0].src="./images/love.png";
        img[0].setAttribute("shu",6);
        //css =obj.style.xxxxx
        var cs=document.querySelector("#style");
    /*
        cs.style.color="red";
        //background-color
        cs.style.backgroundColor="blue";
        cs.style.border='2px dashed yellow';
    */
        //添加class
        cs.className="bk";
        var lis=document.querySelectorAll("#txt li");
        for(let i=0;i<lis.length;i++){
            if((i+1)%2==0){
                lis[i].innerHTML="BBB";
            }else{
                lis[i].style.backgroundColor="yellow";
            }
            lis[i].setAttribute("price",Math.random()*1000)
        }
    }
</script>
</html>